<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
<s:admin pageName="che168_price">
<jsp:attribute name="headPart">
	<script>
		//plain
		var _selects = ["brand", "model", "build"];
		var toInit = true;
		function _populate(level, data){
			var ops = [];
			for(var i = 0; i < data.length; i++){
				var item = data[i];
				ops.push("<option value='"+item+"'>"+item+"</option>");
			}
			var select = $("#" + _selects[level]);
			select.html(ops.join());
			if(toInit === true){
				if(level == 0){
					<c:if test="${not empty brand}">
					select.val("${brand}");
					</c:if>
				}
				else if(level == 1){
					<c:if test="${not empty model}">
					select.val("${model}");
					</c:if>
				}
				else if(level == 2){
					<c:if test="${not empty build}">
					select.val("${build}");
					</c:if>
				}
			}
			select.change();
		}
	
		function _select(level){
			if(level > 0){
				var selectedValue = _selects[level - 1];
				if($("#" + selectedValue).val() == ''){
					return;
				}
			}
			var brand = $("#brand").val();
			var model = $("#model").val();
			var build = $("#build").val();
			$.get("getCategories", {
				brand: brand,
				model: model,
				build: build,
				level: level
			}, function(data){
				_populate(level, data);
			})
		}
		
		$(function(){
			_select(0);
			<c:if test="${not empty mileage}">
				$("#mileage").val(${mileage});
			</c:if>
		})
	</script>
</jsp:attribute>
<jsp:body>
<div class="row main">
	<h4 class="page-header">Price of Current Month (Car used within last 8 months)</h4>
	<form id="searchForm" method="GET" action='index'>
		<div class="form-horizontal">
			<div class="form-group">
				<label class="control-label col-sm-1">Brand</label>
				<div class="col-sm-3">
					<select id="brand" name="brand" class="form-control" onchange="_select(1)">
					</select>
				</div>
				<label class="control-label col-sm-1">Model</label>
				<div class="col-sm-3" onchange="_select(2)">
					<select id="model" name="model" class="form-control">
					</select>
				</div>
				<label class="control-label col-sm-1">Build</label>
				<div class="col-sm-2">
					<select id="build" name="build" class="form-control">
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-1">Mileage</label>
				<div class="col-sm-2">
					<select id="mileage" name="mileage" class="form-control">
						<option value="0">All</option>
						<option value="1">0 - 5000</option>
						<option value="2">5000 - 20.000</option>
						<option value="3">20.000 - 50.000</option>
						<option value="4">50.000 - 100.000</option>
						<option value="5">100.000 - 150.000</option>
						<option value="6">150.000 - 200.000</option>
						<option value="7">200.000 - 300.000</option>
						<option value="8">over 300.000</option>
					</select>
				</div>
				
				<div class="col-sm-4 text-right">
		    		<button type="submit" class="btn btn-primary btn-sm">
		    			<span class="glyphicon glyphicon-search"></span> Search
		    		</button>
		    	</div>
		    	
			</div>
		</div>
	</form>
	<div class="col-sm-12" style="padding-top: 10px;">
		<c:if test="${not empty page}">
			<span class="label label-default">${aggregate[3]} records</span>
			<span class="label label-danger">Average: ${aggregate[2].intValue()}</span>
			<span class="label label-info">Highest: ${aggregate[0]}</span>
			<span class="label label-primary">Lowest: ${aggregate[1]}</span>
			
			<table class="table table-striped table-hover table-condensed">
	        	<thead>
	        		<tr class="active small">
		    			<th>Brand</th>
		    			<th>Model</th>
		    			<th>AdTitle</th>
		    			<th>Build Year</th>
		    			<th>Mileage</th>
		    			<th>Sold Price</th>
		    			<th>Sold Times</th>
		    			<th>Scraped Date</th>
		    			<th>Seller</th>
	        		</tr>
	        	</thead>
	        	<tbody>
	        		<c:forEach items="${page.getContent()}" var="i">
			    		<tr>
			    			<td style="padding-top:10px;"><span class="label label-success">${i.brand}</span></td>
			    			<td>${i.model}</td>
			    			<td>${i.adTitle}</td>
			    			<td>${i.build}</td>
			    			<td>${i.mileage}</td>
			    			<td>${i.soldPrice}</td>
			    			<td>${i.soldTimes}</td>
			    			<td><fmt:formatDate value="${i.scrapedDate}" pattern="dd-MM-yyyy"></fmt:formatDate></td>
			    			<td>${i.sellerName}</td>
			    		</tr>
			    	</c:forEach>
	        	
	        	</tbody>
	        </table>
	        
	        <div class="text-right">
	        	<s:paging page="${page}"></s:paging>
	        </div>
        </c:if>
	</div>
</div>
</jsp:body>
</s:admin>
